<template>
    <div class="">
        <Breadcrumb :route="routes" />
        <div class="wb-container">
            <div class="mian-content">
                <div class="page-table">
                    <div class="btn-primary">
                        <el-button class="btnStyle" @click="GoodsCateForm()" v-has="'classAdd'">添加</el-button>
                    </div>
                    <el-table v-loading="loading" element-loading-text="加载数据..." :data="data.goodsCateData"
                        style="width: 100%;height: 100%;" size="small"
                        :header-cell-style="{ background: '#3CB731', color: '#fff', fontSize: '14px', height: '40px', letterSpacing: '2px' }">
                        <template #empty>
                            <el-empty description="暂无数据！" />
                        </template>
                        <el-table-column prop="name" label="分类名称" width="180" align="center" />
                        <el-table-column prop="id" label="ID" width="180" align="center" />
                        <el-table-column prop="admin_user_id" label="用户Id" align="center" />
                        <el-table-column label="操作" align="center">
                            <template #default="{ row }">
                                <div class="operate-btn">
                                    <el-button type="info" @click="GoodsCateForm(row)" v-has="'classEdit'">编辑 </el-button>
                                    <el-button type="danger" @click="removeGoodsCate(row)" v-has="'classRemove'">删除
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 分页器 -->
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                        :page-sizes="[15, 20, 25, 30]" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
                <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="30%">
                    <el-form :model="data.form">
                        <el-form-item label="分类名称" porp="name" :label-width="formLabelWidth">
                            <el-input v-model="data.form.name" autocomplete="off" placeholder="输入商品分类名称" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="cancelClick()">取消</el-button>
                            <el-button type="primary" @click="addGoodsCate">
                                确定
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import Breadcrumb from '@/components/nav-header'
import { goodsCateList, goodsCateAdd, goodsEdit, goodsRemove } from '@/api/GoodsCate'
import { ElMessage } from 'element-plus'
const route = useRoute()
const routes = ref()
const data = reactive({
    goodsCateData: [],
    form: {
        name: ''
    }
})
const dialogTitle = ref()
const loading = ref(true)
const dialogFormVisible = ref(false)
const formLabelWidth = '80px'
const id = ref()
const hasId = ref()
const currentPage = ref(1)
const pageSize = ref(15)
const small = ref(true)
const background = ref(true)
const disabled = ref(false)
const total = ref(0)

onMounted(() => {
    routes.value = route.matched
    getGoodsCate()

})
const getGoodsCate = async () => {
    const goodsCate = await goodsCateList({ limit: currentPage.value, page: pageSize.value }).then(cate => {
        const { code, data } = cate
        loading.value = false
        if (code == 200) {
            data.goodsCateData = data.data
            total.value = data.total
        }
    }).catch((err) => {
        loading.value = false
    })
}
const GoodsCateForm = (row) => {
    if (row) {
        id.value = row.id
        dialogFormVisible.value = true
        dialogTitle.value = '编辑'
        data.form.name = row.name
        hasId.value = 1
    } else {
        dialogFormVisible.value = true
        dialogTitle.value = '添加'
        hasId.value = 2
    }
}
const addGoodsCate = async () => {
    if (hasId.value === 1) {
        let cateEditName = data.form
        let CateId = id.value;
        const Edit = await goodsEdit(CateId, cateEditName).then(r => {
            const { code, data } = r
            if (code == 200) {
                ElMessage.success('分类名编辑成功')
                data.form.name = ''
                getGoodsCate()
                dialogFormVisible.value = false
            }
        })

    } else if (hasId.value === 2) {
        let cateName = data.form
        const AddCate = await goodsCateAdd(cateName).then(s => {
            const { code, data } = s
            if (code == 200) {
                ElMessage.success('添加分类名成功')
                data.form.name = ''
                getGoodsCate()
                dialogFormVisible.value = false
            }
        })
    }
}
const cancelClick = () => {
    dialogFormVisible.value = false
    data.form.name = ''
}
const removeGoodsCate = (row) => {
    ElMessageBox.confirm(
        '确定要删除这条数据吗？',
        '删除商品的分类数据',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let removeId = row.id
            const RemoveCate = await goodsRemove(removeId).then(res => {
                const { code, data } = res
                if (code == 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    getGoodsCate()
                }
            })
        })
        .catch(() => {
        })
}
const handleSizeChange = (e) => {
    pageSize.value = e
    getGoodsCate()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getGoodsCate()
}
</script>

<style lang="less" scoped>
.btn-primary {
    margin-bottom: 20px;
}

:deep(.el-dialog) {
    header {
        background: rgb(68, 171, 247);
        margin-right: 0;

        .el-dialog__title {
            color: #fff;
        }

        .el-dialog__headerbtn i {
            color: #fff;
        }
    }
}

:deep(.el-dialog__close) {
    color: #fff;
}

:deep(.el-button) {
    padding: 2px 10px;
    letter-spacing: 2px;
    font-size: 12px;
}

.dialog-footer {
    .el-button {
        padding: 4px 20px;
        font-size: 14px;
    }
}

.operate-btn {
    margin: 10px;
}
</style>